/*
  1、移动端
    1.1 移动端开发方案
      >> Native App（原生App）：（IOS\Android）

      >> H5 App(web app)

      >> Hybrid App(混合开发)：JS + Native
        ioinc -- angular
        mui
        weex
        react-native -- react
        小程序（uni-vue,taro-react）
        快应用
        Flutter -- 谷歌移动端 UI 框架

    1.2 什么是小程序
      不需要下载安装就可以使用的应用。

    1.3 小程序可以做什么？
      电商
      直播
      内容
      视频娱乐
      健康
      快递查询

    1.4 运行环境
      在小程序中 渲染 和 脚本 是分开的，分别运行在不同的线程中；
      在 IOS 上，JS 运行在 JavaScriptCore 中，由 WKWebView 来渲染；
      Android 上，JS 是由 X5 JSCore 来渲染

    1.5 注意事项：
      所有依赖浏览器 JS 库无法使用的；
      因为小程序没有 window、没有 document；

  2、小程序配置
    2.1 app.json 全局配置
      >> pages：相当于路由配置，数组结构，数组第一位为主页

      >> window -- 全局窗口设置

      >> tabBar -- 底部导航

    2.2 app.wxss -- 全局样式
      >> wxss 规则
        * 具有大部分css特性；
        * 支持 @import "common.wxss"; 语法
        * 支持部分选择器；
        * 全局样式定义在 app.wxss，局部样式定义在 page.wxss；
        * 新增单位：rpx
        
    2.3 app.js -- 小程序的应用逻辑
      App({
        小程序生命周期(),
        globalData: {}, // 全局数据，任意页面都能访问，但不是响应式数据
        定义的其他方法或者其他数据
      })

      >> onLaunch -- 小程序的初始化

      >> onShow -- 小程序展示（切换前台）

      >> onHide -- 小程序切换后台

      >> onError -- 小程序错误监听

      >> onPageNotFound -- 访问不存在的页面触发的

      >> onUnhandledRejection -- 未处理的 Promise 拒绝事件监听函数

      >> onThemeChange -- 系统主题变化

      >> getApp() -- 在其他页面中调用，获取 app 实例的
        const app = getApp()

    2.4 page.wxss -- 页面局部样式

    2.5 page.wxml -- 页面结构

    2.6 page.json -- 页面配置，可以覆盖全局相同配置

    2.7 page.js -- 页面逻辑
      Page({})

      >> data -- 当前页面的数据 -- 响应式数据

      >> onLoad -- 页面加载

      >> onReady -- 监听页面初次渲染完成

      >> onShow -- 当前页面的显示

      >> onHide -- 当前页面的隐藏

      >> onUnload -- 当前页面的卸载

      >> onPullDownRefresh -- 监听下拉刷新动作

      >> onReachBottom -- 上拉加载

      >> onShareAppMessage -- 分享

      >> onShareTimeline -- 分享朋友圈

      >> onAddToFavorites -- 收藏

      >> onPageScroll -- 页面滚动监听

      >> onResize -- 尺寸大小变化

      >> onTabItemTap -- tab 页面特有事件

      >> onSaveExitState -- 页面销毁状态保留回调

      >> 其他自定义事件或者属性

  3、小程序的路由
    3.1 组件跳转
      <navigator url="" open-type="navigate"></navigator>

      navigate：跳转
      redirect：重定向
      switchTab：切换 tab
      reLaunch：重载
      navigateBack：后退

    3.2 JS API 跳转
      wx.navigateTo(Object object)
      wx.redirectTo(Object object)
      wx.switchTab(Object object)
      wx.reLaunch(Object object)
      wx.navigateBack(Object object)

  4、数据绑定
    <view>{{msg}}</view>
    <view title="{{title}}">
    {{a + b}}
    {{'hell' + ab}}
    {{条件 ? 真 : 假}}
    <view style="color:{{co}};">
    <checkbox checked="{{true}}" />

  5、条件渲染
    wx:if
    wx:elif
    wx:else

    如果同时控制多个标签的渲染：
    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>

  6、列表渲染
    <view wx:for="{{array}}">{{index}}、{{item}}</view>

    <view wx:for="{{list1}}" wx:key="*this">{{index}}-{{item}}</view>

  7、事件
    7.1 事件类型
      tab
      longpress
      input

    7.2 绑定事件
      bind+ 事件名 -- 冒泡
      catch+事件名 --阻止事件向上冒泡
      capture-bind:事件名 -- 捕获

    7.3 事件对象
      
    7.4 参数传递
      >> 通过自定义属性传参
        <button bindtap="showMsg" data-my="hahaha">按钮</button>

        // JS 中
        e.target.dataset

      >> 表单数据 
        <input type="text" bindinput="getValue"/>

        e.detail

      >> mark 传参
        <view mark:viewMark="view mark">
          <button bindtap="showMsg" data-my="hahaha" mark:myMark="this is my">按钮</button>
        </view>

        e.mark

  8、数据修改
    8.1 语法
      通过调用 this.setData() 进行数据修改。
      
  9、关于小程序中媒体资源的使用
    因为小程序限制大小为 2M，所以建议所有的媒体资源使用网络地址（除开 tabBar图标）。
*/